// Layout width
@width:740px; // Main: 740, log in: 500

// Colors
@color:#1d5b94;
@goodColor:#00C71E;
@badColor:#C70000;

.box-shadow(@offsetX, @offsetY, @spread, @color) {
	box-shadow:@offsetX @offsetY @spread @color;
	-webkit-box-shadow:@offsetX @offsetY @spread @color;
	-moz-box-shadow:@offsetX @offsetY @spread @color;
	-ms-box-shadow:@offsetX @offsetY @spread @color;
	-o-box-shadow:@offsetX @offsetY @spread @color;
}

.border-radius(@radius) {
	border-radius:@radius;
	-webkit-border-radius:@radius;
	-moz-border-radius:@radius;
	-ms-border-radius:@radius;
	-o-border-radius:@radius;
}

.gradient(@from, @to) {
	background:@from;
	background:-moz-linear-gradient(top, @from 0%, @to 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,@from), color-stop(100%,@to));
	background:-webkit-linear-gradient(top, @from 0%,@to 100%);
	background:-o-linear-gradient(top, @from 0%,@to 100%);
	background:-ms-linear-gradient(top, @from 0%,@to 100%);
	background:linear-gradient(to bottom, @from 0%,@to 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='@from', endColorstr='@to',GradientType=0);
}

.center() {
	margin-left:auto;
	margin-right:auto;
}

*:focus {
	outline:none;
}

body {
	margin:0px;
	padding:0px;
	font-family:Helvetica Neue, Arial, Helvetica, Sans-serif;
	font-family:14px;
	background-color:#fff;

	#wrapper {
		width:@width;
		margin-top:30px;
		margin-bottom:30px;
		overflow:hidden;
		.center();
		.border-radius(5px);
		.box-shadow(0px, 0px, 30px, #999);

		a {
			color:@color;
			font-weight:bold;
			text-decoration:none;

			&:hover {
				color:darken(@color, 20%);
			}
		}

		// General layout
		header {
			font-size:50px;
			text-align:center;
			padding-top:20px;
			padding-bottom:20px;
			font-weight:100;
			color:#fff;
			background-color:@color;
			border-top:2px solid lighten(@color, 20%);
			text-shadow:1px 1px 0px rgba(0,0,0,0.3);
		}

		.info_bar {
			background-color:#080b0f;
			color:#666;
			padding:10px 15px;
			text-align:center;
		}

		.tag {
			display:inline-block;
			padding:2px 5px;
			background-color:@color;
			color:darken(@color, 25%);
			border-top:1px solid lighten(@color, 20%);
			text-shadow:1px 1px 0px lighten(@color, 15%);
			.border-radius(2px);
			margin-left:5px;
			margin-right:5px;
			font-weight:bold;
		}

		.good {
			background-color:@goodColor;
			color:darken(@goodColor, 25%);
			border-top:1px solid lighten(@goodColor, 20%);
			text-shadow:1px 1px 0px lighten(@goodColor, 15%);
		}

		.bad {
			background-color:@badColor;
			color:darken(@badColor, 25%);
			border-top:1px solid lighten(@badColor, 20%);
			text-shadow:1px 1px 0px lighten(@badColor, 15%);
		}

		#main {
			padding:30px;
			background-color:#e7e7e7;

			.tag {
				margin:0px;
			}

			.good {
				.box-shadow(1px, 1px, 0px, darken(@goodColor, 10%));
			}

			.bad {
				.box-shadow(1px, 1px, 0px, darken(@badColor, 10%));
			}

			// Log in
			.login {

				input[type="text"], input[type="password"] {
					width:@width - 140px;
				}

				.info, .error {
					text-align:left;
					color:#666;
					font-size:10px;
					padding:10px;
					color:darken(orange, 40%);
					background-color:orange;
					margin-top:10px;
					border:1px solid darken(orange, 10%);
					.border-radius(2px);
				}

				.error {
					font-size:16px;
					color:darken(@badColor, 40%);
					background-color:lighten(@badColor, 10%);
					border:1px solid darken(@badColor, 10%);
				}
			}

			// Form fields
			input[type="text"], input[type="password"] {
				font-size:14px;
				color:#585858;
				border:1px solid #b0b0b0;
				background-color:#f1f1f1;
				border-radius:2px;
				padding:6px;
				margin-bottom:20px;
				-ms-box-shadow:1px 1px 0px #fff, 0px 1px 0px #fff inset;
				-o-box-shadow:1px 1px 0px #fff, 0px 1px 0px #fff inset;
				-moz-box-shadow:1px 1px 0px #fff, 0px 1px 0px #fff inset;
				-webkit-box-shadow:1px 1px 0px #fff, 0px 1px 0px #fff inset;
				box-shadow:1px 1px 0px #fff, 0px 1px 0px #fff inset;

				&:focus {
					border:1px solid #2493bf;
					color:#1e1e1e;
					.box-shadow(0px, 0px, 10px, #3bb2eb);
				}
			}

			input[type="submit"], .button {
				-webkit-border-radius:2px;
				-moz-border-radius:2px;
				-o-border-radius:2px;
				-ms-border-radius:2px;
				border-radius:2px;
				border:1px solid #b0b0b0;
				-ms-box-shadow:1px 1px 0px #fff, 0px 1px 0px #fff inset;
				-o-box-shadow:1px 1px 0px #fff, 0px 1px 0px #fff inset;
				-moz-box-shadow:1px 1px 0px #fff, 0px 1px 0px #fff inset;
				-webkit-box-shadow:1px 1px 0px #fff, 0px 1px 0px #fff inset;
				box-shadow:1px 1px 0px #fff, 0px 1px 0px #fff inset;
				padding:6px 10px;
				font-size:14px;
				color:#5e5e5e;
				text-shadow:1px 1px 0px #fff;
				display:inline-block;
				.gradient(#f2f2f2, #dedede)
			}

			input[type="submit"]:hover, .button:hover {
				text-shadow:1px 1px 0px #365b74;
				color:#fff;
				border:1px solid #104272;
				-ms-box-shadow:1px 1px 0px #fff, 0px 1px 0px #589dcc inset;
				-o-box-shadow:1px 1px 0px #fff, 0px 1px 0px #589dcc inset;
				-moz-box-shadow:1px 1px 0px #fff, 0px 1px 0px #589dcc inset;
				-webkit-box-shadow:1px 1px 0px #fff, 0px 1px 0px #589dcc inset;
				box-shadow:1px 1px 0px #fff, 0px 1px 0x #589dcc inset;
				.gradient(#398bc2, #2678ae)
			}

			input[type="submit"]:active, .button:active {
				-ms-box-shadow:1px 1px 0px #fff, 0px 0px 5px rgba(0,0,0,0.5) inset;
				-o-box-shadow:1px 1px 0px #fff, 0px 0px 5px rgba(0,0,0,0.5) inset;
				-moz-box-shadow:1px 1px 0px #fff, 0px 0px 5px rgba(0,0,0,0.5) inset;
				-webkit-box-shadow:1px 1px 0px #fff, 0px 0px 5px rgba(0,0,0,0.5) inset;
				box-shadow:1px 1px 0px #fff, 0px 0px 5px rgba(0,0,0,0.5) inset;
			}

			.divider {
				margin-top:15px;
				margin-bottom:15px;
				height:1px;
				border-bottom:1px dotted #999;
			}

			h2 {
				font-size:16px;
			}
			
			h3 {
				font-size:14px;
			}

			.changelog {
				padding:20px;
			}

			.instructions {
				padding:20px;
				font-size:12px;
			}

			.old {
				opacity:0.6;
			}
			
			ol {
				margin:0px;
				padding:0px;
				margin-left:50px;

				li {
					padding:5px;
				}
			}
		}
	}
}